<template>
  <div class="detailLive">
    <video src="" controls="controls"></video>
    <van-tabs swipeable>
      <van-tab v-model="active" :title="'评论'">
        <div class="comment">
          <div class="pl">
            <div class="centerpl" v-for="item in  commentList">
              <div class="content-list">
                <img :src='item.img'>
                <div class="jtpl">
                  <p class="name">{{item.name}}</p>
                  <p class="text">{{item.pl}}</p>
                </div>
              </div>
            </div>
            <div class="bottom">
              <input placeholder="说几句" v-model="inputValue">
              <p @click="send">发送</p>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab :title="'介绍'">
        <div class="comment">
          <div class="js">
            <p>直播名称:{{liveName}}</p>
            <p>直播介绍:{{liveInfo}}</p>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="flex">
      <div class="love-all" @click="love">
        <img class="love" v-if="loveTag=== 0" src="../../../assets/images/live/004.png">
        <img class="loved" v-else="loveTag===1" src="../../../assets/images/live/004-active.png">
        <p>{{loveNum}}</p>
      </div>
      <div class="good-all" @click="good">
        <img class="good" v-if="goodTag=== 0" src="../../../assets/images/live/005.png">
        <img class="gooded" v-else="goodTag===1" src="../../../assets/images/live/005-active.png">
        <p>{{goodNum}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'vant';
  import axios from 'axios'

  export default {
    name: "detailLive",
    data() {
      return {
        id: "",
        username: '小米儿',
        active: 1,
        loveTag: 0,
        goodTag: 0,
        loveNum: 0,
        goodNum: 0,
        list: [],
        inputValue: '',
        titleList: [{
          title: '评论'
        }, {
          title: '介绍'
        }],
        commentList: [],
        liveInfo: [],
        clientHeight: '',
        liveUrl: '',
        liveName: '',
      };
    },
    mounted() {
      this.getdetailInfo('/api/activelist/read');
    },
    methods: {
      //点击提交评论
      send() {
        if (this.inputValue.length > 0) {
          let obj = {};
          obj.img = 'https://img01.sogoucdn.com/net/a/04/link?url=http%3A%2F%2Fimg02.sogoucdn.com%2Fapp%2Fa%2F100520024%2Fad6e19278adea00ab0bf830fb6d829f5&appid=122';
          obj.name = '小东西';
          obj.pl = this.inputValue;
          // obj.time = new Date().format("yyyy-MM-dd hh:mm:ss");
          this.commentList.push(obj);
          this.inputValue = ''
        } else {
          Toast("请先填写评论内容！");
        }
      },
      // 喜欢
      love() {
        let that = this
        if (this.loveTag === 1) {
          this.loveNum--;
          this.loveTag = 0;
        }
        else {
          this.loveNum++;
          this.loveTag = 1;
        }
        this._getLoveInfo('/api/collectlist', that.$route.params.id, 12)
      },
      // 点赞
      good() {
        let that = this
        if (this.goodTag === 0) {
          this.goodNum++;
          this.goodTag = 1;
        }
        else {
          this.goodNum--;
          this.goodTag = 0;
        }
        this._getgoodInfo('/api/actprizelist', that.$route.params.id, 12)
      },
      //请求数据
      getdetailInfo(url) {
        let that = this
        let id = that.$route.params.id
        let status = that.$route.params.status
        axios.get(url, {params: {id: id, memberid: 12}}).then(function (res) {
          that.liveUrl =
            "rtmp://" + res.data.data.pulldomain + "/" + res.data.data.app + "/" + res.data.data.stream;
          that.goodTag = res.data.data.hasprize;
          that.loveTag = res.data.data.hascollect;
          that.goodNum = res.data.data.prizenum;
          that.loveNum = res.data.data.collectnum;
          that.liveName = res.data.data.name;
          that.liveInfo = res.data.data.summary;
        })
      },
      // 请求收藏
      _getLoveInfo(url, id, memberid) {
        axios.post(url, {
          'reltype': 1,
          'relid': id,
          'memberid': memberid,
        }).then((res) => {
          console.log(res);
        })

      },
      // 请求点赞
      _getgoodInfo(url, id, memberid) {
        axios.post(url, {
          'prizetype': 1,
          'actid': id,
          'memberid': memberid,
        }).then((res) => {
          console.log(res);
        })

      },
    }
  }
</script>

<style scoped lang="less">
  .detailLive {
    background: #efeef4;
    video {
      width: 100%;
      height: 200px;
    }
    .comment {
      text-align: left;
      min-height: 420px;
      .pl {
        position: relative;
        .centerpl {
          .content-list {
            padding: 10px;
            font-size: 13px;
            line-height: 170%;
            display: flex;
            img {
              width: 38px;
              height: 38px;
            }
            .jtpl {
              padding: 0 10px;
              .name {
                padding-bottom: 4px;
                color: #5c65b2;
              }
              .text {
                color: dimgrey;
                background-color: white;
                padding: 5px 10px;
                border-radius: 2px;
              }
              .time {
                color: gray;
                padding: 4px;
              }
            }
          }

        }
        .bottom {
          position: fixed;
          bottom: 0;
          width: 100%;
          height: 40px;
          display: flex;
          align-items: center;
          background-color: white;
          input {
            padding-left: 10px;
            border: none;
            outline: none;
            width: 88%;
          }
          input::placeholder {
            font-size: 12px;
          }
          p {
            border: 1px solid #efeef4;
            width: 60px;
            height: 40px;
            font-size: 14px;
            color: darkturquoise;
            line-height: 40px;
            text-align: center;
          }
        }
      }
      .js {
        font-size: 14px;
        line-height: 170%;
        padding: 10px;
      }
    }
    .flex {
      position: fixed;
      right: 10px;
      top: 60%;
      img {
        height: 40px;
        display: block;
      }
      p {
        font-size: 10px;
        color: gray;
        padding: 2px 0 4px 0;
      }
    }
  }
</style>
